<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录账号</title>
    <meta name="author" content="Codrops" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />

    <style>
        body {
            /*background: #e1c192 url(images/wood_pattern.jpg);*/
        }
    </style>
</head>
<body style="overflow: visible">
<div class="container">
    <section class="main">
        <form class="form-2">
            <h1><span class="log-in">登录</span> or <a href="http://www.baidu.com" target="_blank" class="sign-up">注册</a></h1>
            <p class="float">
                <label for="login"><i class="icon-user"></i>账号</label>
                <input type="text" name="login" placeholder="用户名" id="login">
            </p>
            <p class="float">
                <label for="password"><i class="icon-lock"></i>密码</label>
                <input type="password" name="password" placeholder="Password" class="showpassword" id="password">
            </p>
            <div  style="width: 100%;margin: 10px 0;text-shadow: 0 1px 0 rgba(255,255,255,0.8); text-align: right">
                <label><input type="checkbox" id="showPassword" >显示密码</label>
            </div>
            <p style="color: indianred; margin-bottom: 15px;font-size: 12px;width: 100%;text-align: center">
                <!--密码错误-->
            </p>
            <p class="clearfix">
                <input type="button"  value="登录" onclick="loginAccount()">
            </p>
        </form>​​
    </section>

</div>
<!-- jQuery if needed -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        
        $('#showPassword').click(function(){
            if($("#showPassword").is(":checked")) {
                $('.icon-lock').addClass('icon-unlock');
                $('.icon-unlock').removeClass('icon-lock');
                $('#password').attr('type','text');
            } else {
                $('.icon-unlock').addClass('icon-lock');
                $('.icon-lock').removeClass('icon-unlock');
                $('#password').attr('type','password');
            }
        });
    });
    
    function loginAccount() {
        const ipcRenderer = require('electron').ipcRenderer;
        ipcRenderer.send('login');
    }
</script>
</body>
</html>